<template>
 <div class="banner-wrapper" style="width: 500%;height: 100%;padding: 20px 0;overflow: hidden;position: relative;">
  <div style="width: 500%;height: 100%;overflow: hidden;border-radius: 10px;">
    <div style="width: 500%;height: 100%;border-radius: 10px;"
    :style="{
      marginLeft:bannerData.size=='large'?((-290 - (bannerData.heightNum / 1.5 + 10) * (bannerData.currentIndex - 1)).toString() + 'px'):((-250 - (bannerData.heightNum / 1.5 + 10) * (bannerData.currentIndex - 1)).toString() + 'px'),
      transition:bannerData.showAnimation?'margin-left 1s cubic-bezier(0.23, 1, 0.320, 1)':'unset',
    }"
    >
      <div
        :style="{
          width:(item.index==bannerData.currentIndex)?(bannerData.currentBannerWidth):((bannerData.heightNum / 1.5).toString() + 'px'),
          transition:bannerData.showAnimation?'all 1s cubic-bezier(0.23, 1, 0.320, 1)':'unset',
          backgroundImage:'url(' + appData.serverURL + '/download/' + item.background + ')',
          paddingTop:(bannerData.heightNum / 2).toString() + 'px'
        }"
        style="height: 100%;border-radius: 10px;margin-right: 10px;display: inline-block;background-color: var(--color-neutral-2);background-position: center;background-repeat: no-repeat;background-size: cover;padding-left: 40px;position: relative;"
        v-for="item in banners"
        class="sBanner"
      >
      <div class="banner-top" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 10px;">

      </div>
      <div style="transform: translateY(-100%);position: absolute;">
        <p style="font-size: 20px;color: white;word-break: break-all;text-shadow: 0 1px 3px rgba(0,0,0,0.3);"
          :style="{
            maxWidth:((bannerData.heightNum / 1.5).toString() + 'px'),
            fontSize:(item.index==bannerData.currentIndex)?(bannerData.currentBannerTitleFontSize):(bannerData.otherBannerTitleFontSize),
            transition:bannerData.showAnimation?'all 1s cubic-bezier(0.23, 1, 0.320, 1)':'unset',
          }"
        >{{ item.title }}</p>
      </div>
      <p @click="test" v-if="item.index==bannerData.currentIndex" style="color: white;opacity: 0.7;position: absolute;text-shadow: 0 1px 3px rgba(0,0,0,0.3);">{{ item.subTitle }}</p>
      <div v-if="item.link!=undefined && item.link!=''" class="button" @click="openLink(item.link)">
        <span style="position: relative;top: 1px;margin-right: 4px;"><svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg></span>
        <span>查看详情</span>
      </div>
      </div>


    </div>
  </div>
  
 </div>
</template>

<script>

export default{
  data(){
    return{
      data:{
        
      }
    }
  },
  mounted(){
    
  },
  methods:{
    openLink(url){
      window.open(url,'_blank')
    },
  },
  props:{
    banners:undefined,
    bannerData:undefined,
    appData:undefined
  },
}
</script>

<style scoped>

.banner-top{
  transition: background-color .5s cubic-bezier(0.23, 1, 0.320, 1);
}

.sBanner:hover .banner-top{
  background-color: rgba(242,242,242,0.1);
}

.button{
  color: white;
  margin-top: 50px;
  padding: 6px 20px;
  border-radius: 10px;
  background-color: rgba(15,15,15,0.4);
  display: inline-block;
  border-bottom: 2px solid rgba(242,242,242,0.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: absolute;
}
.single-banner{
  height: 100%;
}

</style>